<template>
	<view class="wanl-page wanlshop-container" v-if="goods">
		<view class="banner">
			<swiper class="swiper" style="height: 750rpx;" circular :indicator-dots="false" :autoplay="true" :interval="2000" :duration="500" :current="currentSwiper" @change="change">
				<swiper-item v-for="(item,index) in goods.images_text" :key="index">
					<image style="width: 100%;height: 750rpx;overflow: hidden;" :src="$wanlshop.oss(item)" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="indicator">{{ currentSwiper + 1 }}/{{goods.images_text.length}}</view>
		</view>
		
		<view class="header bg-white margin-bottom-xs">
			<view class="tips padding-lr margin-bottom-sm text-cut-1" v-if="goods.slogan">{{goods.slogan}}</view>
			<text class="padding-lr name wanl-black text-lg text-cut-2 text-bold6">{{goods.title}}</text>
			<scroll-view scroll-x="true" class="sku flex justify-start align-center">
				<view class="item flex flex-direction align-center margin-top-sm" v-for="(item,index) in goods.sku" :key="index" :class="{cur:cur == index}" @tap="cur = index">
					<text class="title">{{item.name}}</text>
					<view class="price">
						<text class="text-price">{{item.price}}</text>
						<!-- <text>{{item.asprice}}</text> -->
					</view>
				</view>
			</scroll-view>
			
		</view>
		
		
		
		<wanl-divider class="bg-white margin-top-sm" bgcolor="#fff" width="60%">服务详情</wanl-divider>
		<view class="wanl-goods-content margin-bottom-sm bg-white" bgcolor="#fff" id="details"><rich-text :nodes="goods.content"></rich-text></view>

		
		<view class="safeAreaBottom"></view>
		<!-- 底部 -->
		<view class="btn flex justify-center align-center wanlian cu-bar foot">
			<view class="lightning flex justify-center align-center" @tap="addOrder">
				<text>立即购买</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				goods: null,
				currentSwiper:0,
				cur: null,
				num: 1,
				remark: ''
			};
		},
		computed: {
			...mapState(['common'])
		},
		onLoad(option) {
			this.loadData(option);
		},
		methods: {
			change(e) {
				this.currentSwiper = e.detail.current
			},
			async addOrder() {
				if(this.cur == null) {
					this.$wanlshop.msg('请选择规格')
				} else {
					this.loading = true;
					let datas = await uni.request({url: '/publics/commons/getToken',method: 'POST',data:{type:`${this.order_type}_order_add`}})
					// 提交订单数据
					await uni.request({
						url: `/addons/homeking/api.order/add`,
						method: 'POST',
						data: {
							sex: 1,
							goods_type: 2,
							remark: this.remark,
							quantity: this.num,
							token: datas[1].data,
							sku_id: this.goods.sku[this.cur].id,
							goods_id: this.goods.id
						},
						success: res => {
							this.$wanlshop.to(`/pages/user/money/pay?type=homeking&token=${res.data.token}&id=${res.data.order_id}`);
							this.loading = false;
						},
						complete: () => {
							setTimeout(() => {
								this.loading = false;
							}, 1500);
						}
					});
				}
			},
			async loadData(data) {
				await uni.request({
					url: '/addons/homeking/api.goods/detail',
					data: data,
					method: 'post',
					success: res => {
						this.goods = res.data
						res.data.content = res.data.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
							var img = `<img style="display: block; max-width: 100%;" src="${this.$wanlshop.oss(capture, 500, 0)}">`;
							return img;
						});
					}
				});
			}
		}
	};
</script>


<style lang="scss">
	page {
		background-color: #ededed;
	}
	.cu-custom {
		background-color: #fff;
		.cu-bar {
			z-index: 99;
			background-color: #fff;
		}
	}
	.banner {
		height: 750rpx;
		position: relative;
		.indicator {
			position: absolute;
			bottom: 10rpx;
			right: 30rpx;
			z-index: 9;
			
			height: 30rpx;
			background: rgba(51,51,51,0.5);
			border-radius: 22rpx;
			padding: 0 12rpx;
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 30rpx;
		}
	}
	
	.header {
		// padding: 16rpx 30rpx 26rpx 30rpx;
		.tips {
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #4CBD66;
			height: 44rpx;
			line-height: 44rpx;
			background: #E9F4EB;
		}
		.sku {
			flex-wrap: nowrap;
			padding: 0 30rpx 30rpx 30rpx;
			white-space: nowrap;
			.item {
				display: inline-flex;
				height: 118rpx;
				background: #F4F4F4;
				border-radius: 6rpx;
				margin-right: 20rpx;
				padding: 0 14rpx;
				justify-content: center;
				&:last-child {
					margin-right: 0;
				}
				.title {
					display: inline-block;
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 54rpx;
				}
				.price {
					margin-top: 2rpx;
					color: #E31F1F;
					text {
						&:nth-child(1) {
							font-size: 32rpx;
							font-weight: bold;
						}
						&:nth-child(2) {
							font-size: 22rpx;
						}
					}
				}
				&.cur {
					background-color: #E9F4EB;
				}
			}
		}
		> .t {
			margin: 14rpx 0 12rpx 0;
			> text {
				display: inline-block;
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 34rpx;
			}
			.view {
				text {
					display: inline-block;
					color: #555555;
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #555555;
					line-height: 34rpx;
					&.iconfont {
						font-size: 30rpx;
						margin-right: 4rpx;
						margin-left: 28rpx;
						font-weight: bold;
					}
					&:nth-child(1) {
						margin-left: 0;
					}
				}
			}
		}
		.tags {
			text {
				display: inline-block;
				color: #4CBD66;
				border: 1px solid #4CBD66;
				border-radius: 4rpx;
				margin-right: 10rpx;
				font-size: 20rpx;
				padding: 2rpx 8rpx;
				&:last-child {
					margin-right: 0;
				}
			}
		}
		.lists {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			white-space: wrap;
			margin-bottom: 18rpx;
			.item {
				display: inline-flex;
				justify-content: flex-start;
				align-items: center;
				margin-right: 24rpx;
				margin-bottom: 10rpx;
				&:last-child {
					margin-right: 0;
				}
				image {
					width: 26rpx;
					height: 26rpx;
					margin-right: 10rpx;
				}
				text {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #666666;
					line-height: 34rpx;
				}
			}
		}
	}
	
	
	.btn {
		.lightning {
			width: 690rpx;
			height: 72rpx;
			background: #4CBD66;
			border-radius: 50rpx;
			text {
				color: #fff;
				font-size: 30rpx;
				font-weight: bold;
			}
		}
	}
	.wanlian,.safeAreaBottom {
		height: calc(128rpx + env(safe-area-inset-bottom)) !important;
	}
	.wanlian {
		background-color: #fff !important;
	}
	.evaluate {
		padding-top: 10rpx;
		padding-bottom: 32rpx;
		margin-bottom: 15rpx;
		.head {
			margin-bottom: 10rpx;
			> text {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 42rpx;
			}
			view {
				text {
					color: #888888;
					font-weight: bold;
					&:nth-child(1) {
						font-size: 22rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						line-height: 30rpx;
					}
					&:nth-child(2) {
						font-size: 20rpx;
						margin-left: 14rpx;
					}
				}
			}
		}
		.list {
			white-space: nowrap;
			.item {
				display: inline-flex;
				width: 536rpx;
				height: 298rpx;
				background: #F4F4F4;
				border-radius: 10rpx;
				margin-right: 20rpx;
				padding: 20rpx 20rpx 12rpx 20rpx;
				flex-direction: column;
				&:last-child {
					margin-right: 0;
				}
				.top {
					.left {
						image {
							width: 52rpx;
							height: 52rpx;
							border-radius: 50rpx;
						}
						.name {
							margin-left: 10rpx;
							text {
								font-size: 24rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #333333;
								line-height: 28rpx;
							}
						}
					}
					.times {
						font-size: 20rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #AAAAAA;
						line-height: 28rpx;
					}
				}
				.text {
					display: inline-block;
					width: 100%;
					font-size: 20rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					// font-weight: 500;
					color: #000000;
					line-height: 28rpx;
					height: 56rpx;
					white-space: initial;
					margin: 32rpx 0 10rpx 0;
				}
				
				.images {
					margin-bottom: 8rpx;
					
					image {
						width: 100rpx;
						height: 100rpx;
						margin-right: 16rpx;
					}
				}
			}
		}
	}
	.store {
		padding: 0 30rpx;
		padding-bottom: 18rpx;
		image {
			width: 108rpx;
			height: 108rpx;
			border-radius: 6rpx;
		}
		.info {
			margin-left: 20rpx;
			> text {
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #444444;
				line-height: 42rpx;
			}
			.more {
				margin-top: 8rpx;
				color: #4CBD66;
				font-size: 22rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #4CBD66;
				line-height: 26rpx;
			}
		}
	}
	.renzhengyonghu {
		.t {
			margin-left: 30rpx;
			text {
				display: inline-block;
				height: 30rpx;
				line-height: 28rpx;
				border-radius: 4rpx;
				border: 1rpx solid #4CBD66;
				padding: 0 4rpx;
				margin-right: 8rpx;
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
	
	.wanl-red {
		color: #f00 !important;
	}
</style>